<template>
	<view class="container">
		<!-- 蓝色背景区域 - 高度400rpx -->
		<view class="blue-background">
			<!-- 导航栏 -->
			<view class="header">
				<view class="nav-bar">
					<uni-icons type="left" size="24" color="#fff" @click="goBack"></uni-icons>
					<text class="nav-title">附近门店</text>
				</view>
			</view>

			<!-- 搜索栏 -->
			<view class="search-container">
				<view class="search-box">
					<input class="search-input" type="text" placeholder="输入需要搜索的内容" v-model="searchText"
						@confirm="handleSearch" />
					<view class="search-btn" @click="handleSearch">
						<uni-icons type="search" size="20" color="#4f90f5"></uni-icons>
					</view>
				</view>
			</view>

			<!-- 历史记录 -->
			<view class="history-section" v-if="historyList.length > 0">
				<text class="history-label">历史记录:</text>
				<view class="history-tag" v-for="(item, index) in historyList" :key="index"
					@click="selectHistory(item)">
					{{ item }}
				</view>
			</view>
		</view>

		<!-- 门店列表 -->
		<scroll-view class="store-list" scroll-y>
			<view class="store-item" v-for="(store, index) in storeList" :key="index" @click="goToStoreDetail(store)">
				<view class="store-info">
					<view class="store-header">
						<text class="store-name">{{ store.name }}</text>
						<text class="store-distance">{{ store.distance }}</text>
					</view>
					<view class="store-rating">
						<view class="stars">
							<uni-icons v-for="(item, i) in 5" :key="i" :type="i < store.rating ? 'star-filled' : 'star'"
								:color="i < store.rating ? '#ffca3e' : '#d3d3d3'" size="16"
								class="star-item"></uni-icons>
						</view>
						<text class="rating-text">{{ store.rating }}分</text>
						<text class="sales-text">销量: {{ store.sales }}</text>
					</view>
					<view class="store-details">
						<view class="store-image">
							<image :src="store.image" mode="aspectFill"></image>
						</view>
						<view class="store-content">
							<view class="store-hours">
								营业时间: {{ store.hours }}
							</view>
							<view class="store-address">
								{{ store.address }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="no-more" v-if="storeList.length > 0">
				<text>暂无更多</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'

	// 搜索文本
	const searchText = ref('')
	// 历史记录
	const historyList = ref([
		'飞飞汽车美容店',
		'飞飞汽修美容店',
		'汽车美容店',
		'汽修美容店'
	])
	// 门店列表
	const storeList = ref([{
			id: 1,
			name: '车百事汽车生活馆',
			distance: '556m',
			rating: 4,
			sales: 556,
			hours: '周一至周五 早上8:00-晚上22:00',
			address: '山阳区人民路与解放路交叉口',
			image: '/static/repair/门店.png',
			phone: '18642589456'
		},
		{
			id: 2,
			name: '车百事汽车生活馆',
			distance: '556m',
			rating: 4,
			sales: 556,
			hours: '周一至周五 早上8:00-晚上22:00',
			address: '山阳区人民路与解放路交叉口',
			image: '/static/repair/门店.png',
			phone: '18642589456'
		}
	])

	// 返回上一页
	const goBack = () => {
		uni.navigateBack()
	}

	// 搜索处理
	const handleSearch = () => {
		if (!searchText.value.trim()) {
			uni.showToast({
				title: '请输入搜索内容',
				icon: 'none'
			})
			return
		}

		// 添加到历史记录（去重）
		if (!historyList.value.includes(searchText.value)) {
			historyList.value.unshift(searchText.value)
			// 最多保存10条历史记录
			if (historyList.value.length > 10) {
				historyList.value = historyList.value.slice(0, 10)
			}
			// 保存到本地存储
			uni.setStorageSync('store_search_history', historyList.value)
		}

		// 执行搜索逻辑（这里可以根据实际需求调用接口）
		console.log('搜索:', searchText.value)
		// TODO: 调用搜索接口
	}

	// 选择历史记录
	const selectHistory = (keyword) => {
		searchText.value = keyword
		handleSearch()
	}

	// 跳转到门店详情
	const goToStoreDetail = (store) => {
		// 将门店数据存储到本地，供详情页使用
		uni.setStorageSync('currentStoreDetail', {
			...store,
			title: '洗车', // 详情页标题
			bannerImage: store.image // 详情页横幅图
		})
		uni.navigateTo({
			url: `/pages/repair/fjmd/mdxq/index?id=${store.id}`
		})
	}

	// 加载历史记录
	onMounted(() => {
		const history = uni.getStorageSync('store_search_history')
		if (history && history.length > 0) {
			historyList.value = history
		}
	})
</script>

<style scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
		position: relative;
	}

	/* 蓝色背景区域 - 高度500rpx */
	.blue-background {
		width: 100%;
		height: 500rpx;
		background-color: #3486fe;
		position: relative;
		overflow: hidden;
	}

	/* 导航栏 */
	.header {
		width: 100%;
		background-color: transparent;
		padding-top: calc(var(--status-bar-height) - 30rpx);
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		height: 88rpx;
		position: relative;
	}

	.nav-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		pointer-events: none;
	}

	.nav-right {
		display: flex;
		align-items: center;
	}

	/* 搜索栏 - 在蓝色背景上，有左右边距 */
	.search-container {
		padding: 20rpx 30rpx 15rpx 30rpx;
		background-color: transparent;
	}

	.search-box {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 50rpx;
		padding: 0 20rpx;
		height: 90rpx;
	}

	.search-input {
		flex: 1;
		height: 100%;
		font-size: 28rpx;
		color: #333;
	}

	.search-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 历史记录 - 在蓝色背景上，没有白色背景，字号大 */
	.history-section {
		padding: 0 30rpx 15rpx 30rpx;
		background-color: transparent;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 15rpx;
		line-height: 1.5;
	}

	.history-label {
		font-size: 36rpx;
		color: #fff;
		font-weight: 500;
		white-space: nowrap;
		margin-right: 0;
	}

	.history-tag {
		padding: 8rpx 18rpx;
		background-color: transparent;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #fff;
	}

	/* 门店列表 - 去掉外层白色背景，只保留门店卡片，有左右边距 */
	.store-list {
		background-color: transparent;
		width: 97%;
		margin-left: 10rpx;
		margin-right: 10rpx;
		margin-top: -50rpx;
		margin-bottom: 0;
		padding: 0;
		height: calc(100vh - 380rpx);
		overflow-y: scroll;
		position: relative;
		z-index: 5;
		padding-bottom: 40rpx;
	}

	.store-item {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
		border: 1rpx solid #f0f0f0;
		width: 100%;
		box-sizing: border-box;
	}

	.store-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.store-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.store-distance {
		font-size: 26rpx;
		color: #4f90f5;
	}

	.store-rating {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.stars {
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}

	.star-item {
		margin-right: 4rpx;
	}

	.rating-text {
		font-size: 24rpx;
		color: #666;
		margin-right: 20rpx;
	}

	.sales-text {
		font-size: 24rpx;
		color: #666;
	}

	.store-details {
		display: flex;
		align-items: flex-start;
	}

	.store-image {
		width: 140rpx;
		height: 100rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.store-image image {
		width: 100%;
		height: 100%;
	}

	.store-content {
		flex: 1;
	}

	.store-hours {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 10rpx;
		line-height: 1.5;
	}

	.store-address {
		font-size: 24rpx;
		color: #666;
		line-height: 1.5;
	}

	.no-more {
		text-align: center;
		padding: 40rpx 0;
		color: #999;
		font-size: 24rpx;
	}
</style>